<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

</html>

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 本页面对应css -->
    <link rel="stylesheet" th:href="@{/css/control-center-style-2.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>

    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>
    <script>

        function setParentIframeHeight(id) {
            var parentIframe = parent.document.getElementById(id);
            sHeight = document.body.scrollHeight
            console.log(sHeight, "init......")
            parentIframe.style.height = sHeight + 'px'
        }
        var detectCallback = function () {
            setParentIframeHeight('content-iframe');
        };
        detectCallback();
    </script>
</head>


<body>
    <div class="row-fluid">
        <div id="content" class="span10" style="width: 100%;">
            <!--<ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">-->
                <!--<li>-->
                    <!--<i class="fas fa-circle-notch"></i>-->
                    <!--<a id="home" href="#" onclick="parent.location.reload()">主页</a>-->
                    <!--<i class="icon-angle-right"></i>-->
                <!--</li>-->
                <!--<li><a href="#">模型展示</a></li>-->
            <!--</ul>-->
            <div class="row-fluid sortable">
                <div class="span12" style="height: 80vh;">
                    <!--20220611删除导航地方-->
                    <!--<div class="box-header" style="margin-bottom: 1.6%; " data-original-title>-->
                        <!--<h2><i class="halflings-icon white user"></i><span class="break"></span>模型展示</h2>-->
                        <!--<div class="box-icon"></div>-->
                    <!--</div>-->
                    <div class="app" id="app" v-cloak>
                        <div class="body">
                            <div class="box-item left-items">
                                <div class="left-energy-graph">
                                    <div class="item-top-tilte">能量实时/预测曲线</div>
                                    <div class="top-control-btn">
                                        <div class="left-control">
                                            <el-date-picker v-model="energy.start_date" type="date" placeholder="开始日期"
                                                size="small" value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                            <el-date-picker v-model="energy.end_date" type="date" placeholder="截止日期"
                                                size="small" value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                            <el-select v-model="energy.source_mode" placeholder="源模型" size="small" id="energyGraphSource">
                                                <el-option v-for="item in energy.source_modes" :key="item.modelVersion"
                                                    :label="item.modelName" :value="item.modelVersion">
                                                    <el-tooltip placement="right-end"
                                                                effect="light"
                                                                :content="item.modelInfo">
                                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                                            {{item.modelName}}
                                                        </el-button>
                                                    </el-tooltip>
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="energy.target_mode" placeholder="目标模型" size="small" id="energyGraphTarget">
                                                <el-option v-for="item in energy.source_modes" :key="item.modelVersion"
                                                    :label="item.modelName" :value="item.modelVersion">
                                                    <el-tooltip placement="right-end"
                                                                effect="light"
                                                                :content="item.modelInfo">
                                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                                            {{item.modelName}}
                                                        </el-button>
                                                    </el-tooltip>
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <el-button type="primary" size="small" @click="energyGen">生成数据</el-button>
                                    </div>
                                    <div>
                                    <el-tag  class="tag-style" v-if="energy.analyseValue != ''">{{energy.source_mode_name}}准确率:
                                        {{energy.analyseValue}}</el-tag>
                                    <el-tag  class="tag-style" v-if="energy.analyseValue1 != ''">{{energy.target_mode_name}}准确率:
                                        {{energy.analyseValue1}}</el-tag>
                                    </div>
                                    <div id="energyGraph" class="energy-graph"></div>
                                </div>
                            </div>
                            <div class="box-item right-items">
                                <div class="right-power-graph">
                                    <div class="item-top-tilte">电量实时/预测曲线</div>
                                    <div class="top-control-btn">
                                        <div class="left-control">
                                            <el-date-picker v-model="power.start_date" type="date" placeholder="开始日期"
                                                size="small" value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                            <el-date-picker v-model="power.end_date" type="date" placeholder="截止日期"
                                                size="small" value-format="yyyy-MM-dd">
                                            </el-date-picker>
                                            <el-select v-model="power.source_mode" placeholder="源模型" size="small" id="eleGraphSource">
                                                <el-option v-for="item in power.source_modes" :key="item.modelVersion"
                                                    :label="item.modelName" :value="item.modelVersion">
                                                    <el-tooltip placement="left"
                                                                effect="light"
                                                                :content="item.modelInfo">
                                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                                            {{item.modelName}}
                                                        </el-button>
                                                    </el-tooltip>
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="power.target_mode" placeholder="目标模型" size="small" id="eleGraphTarget">
                                                <el-option v-for="item in power.source_modes" :key="item.modelVersion"
                                                    :label="item.modelName" :value="item.modelVersion">
                                                    <el-tooltip placement="left"
                                                                effect="light"
                                                                :content="item.modelInfo">
                                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                                            {{item.modelName}}
                                                        </el-button>
                                                    </el-tooltip>
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <el-button type="primary" size="small" @click="powerGen">生成数据</el-button>
                                    </div>
                                    <div>
                                    <el-tag  class="tag-style" v-if="power.analyseValue != ''">{{power.source_mode_name}}准确率:
                                        {{power.analyseValue}}</el-tag>
                                    <el-tag  class="tag-style" v-if="power.analyseValue1 != ''">{{power.target_mode_name}}准确率:
                                        {{power.analyseValue1}}</el-tag>
                                    </div>
                                    <div id="powerGraph" class="power-graph"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.js}"></script>

    <!-- <script th:src="@{/js/detect-element-resize.js}"></script>
    <script th:src="@{/js/iframe-resize.js}"></script> -->
    <!-- import Vue before Element -->
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>-->
    <script th:src="@{/js/elementui/index.js}"></script>

    <script>
        detectCallback();
    </script>
    <script>
        let getNumParam = val => { return isNumber(val) ? val : "" }
        let BASE_URL = ""
        function reDraw(id, option) {
            let elem = document.getElementById(id)
            elem.removeAttribute("_echarts_instance_");
            let mychart = echarts.init(document.getElementById(id));
            mychart.setOption(option, true);
        }

        function drawEnChart(data, enChart_) {
            var enChart = echarts.init(document.getElementById(enChart_));
            $.ajax({
                type: "POST",
                url: "/multipower/model/energy/compare",
                contentType: "application/json",
                dataType: "json",
                async: true,
                data: JSON.stringify(data),
                success: function (data) {
                    if (data.status != 200) {
                        // layer.alert(data.msg, {
                        layer.alert("无实际值，继续对比会产生错误", {
                            icon: 5,
                            title: "错误"
                        });
                        return;
                    }
                    if (enChart != null && enChart != "" && enChart != undefined) {
                        enChart.dispose();
                    }
                    console.log(data)
                    option1.series[0].data = data.data.sourceList;
                    option1.series[1].data = data.data.targetList;
                    option1.series[2].data = data.data.historyList;
                    legend = {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
                        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: '30',
                        data:[vm.energy.source_mode_name+'值',vm.energy.target_mode_name+'值','实际值'],
                        textStyle: {
                            //标题颜色
                            color: "rgba(251, 251, 251, 1)"
                        },
                    };
                    option1.legend = legend;
                    option1.series[0].name = vm.energy.source_mode_name+'值';
                    option1.series[1].name = vm.energy.target_mode_name+'值';
                    option1.series[2].name = "实际值";
                    option1.xAxis.data = data.data.dateList;
                    option1.xAxis.axisLabel.interval = Math.ceil(data.data.dateList.length / 7) - 1;
                    enChart = echarts.init(document.getElementById(enChart_));
                    enChart.setOption(option1);
                    console.log(option1);
                    vm.energy.analyseValue=data.data.analyseValues[0];
                    vm.energy.analyseValue1=data.data.analyseValues[1];
                },
                error: function (data) {
                    layer.alert(data.msg, {
                        icon: 5,
                        title: "错误"
                    });
                    return;
                }
            })
        }

        function drawEleChart(data, eleChart_) { //电量，冷热量折线图
            var eleChart = echarts.init(document.getElementById(eleChart_));
            $.ajax({
                type: "POST",
                url: "/multipower/model/electric/compare",
                contentType: "application/json",
                dataType: "json",
                async: true,
                data: JSON.stringify(data),
                success: function (data) {
                    if (data.status != 200) {
                        // layer.alert(data.msg, {
                        layer.alert("无实际值，继续对比会产生错误！", {
                            icon: 5,
                            title: "错误"
                        });
                        return;
                    }
                    if (eleChart != null && eleChart != "" && eleChart != undefined) {
                        eleChart.dispose();
                    }
                    console.log(data)
                    option1.series[0].data = data.data.sourceList;
                    option1.series[1].data = data.data.targetList;
                    option1.series[2].data = data.data.historyList;
                    legend = {
                        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                        orient: 'horizontal',
                        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                        x: 'center',
                        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                        y: '30',
                        data: [vm.power.source_mode_name+'值',vm.power.target_mode_name+'值','实际值'],
                        textStyle: {
                            //标题颜色
                            color: 'rgba(251, 251, 251, 1)'
                        },
                    };
                    option1.legend = legend;
                    option1.series[0].name = vm.power.source_mode_name+'值';
                    option1.series[1].name = vm.power.target_mode_name+'值';
                    option1.series[2].name = "实际值";
                    option1.xAxis.data = data.data.dateList;
                    option1.xAxis.axisLabel.interval = Math.ceil(data.data.dateList.length / 7) - 1;
                    eleChart = echarts.init(document.getElementById(eleChart_));
                    eleChart.setOption(option1);
                    console.log(option1);
                    vm.power.analyseValue=data.data.analyseValues[0];
                    vm.power.analyseValue1=data.data.analyseValues[1];
                },
                error: function (data) {
                    layer.alert(data.msg, {
                        icon: 5,
                        title: "错误"
                    });
                    return;
                }
            })
        }

        var option1 = {

            title: {
                // text: '小时能量预测',
                // subtext: "明日能量",
                subtextStyle: {
                    color: "rgba(251, 251, 251, 1)",
                    fontSize: 20
                },
                x: '80',
                padding: [0, 0, 0, 50],
                textStyle: {
                    color: 'rgba(251, 251, 251, 1)',
                    fontSize: '16',
                    fontWeight: '500'
                },
            },
            animation: false,
            // animationDuration:15000,

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: ['当前模型值', '实际值', '所选模型值'],
                textStyle: {
                    //标题颜色
                    color: "rgba(251, 251, 251, 1)"
                },
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '26%', // 等价于 y: '16%'
                left: '7%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: 'rgba(251, 251, 251, 1)'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: -60, // 旋转角度
                    interval: 1,//设置X轴数据间隔几个显示一个，为0表示都显示
                    // formatter: function (value) {
                    //     return value.split('').join('\n');
                    // }//设置坐标轴横轴数据垂直显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                type: 'value',
                // min:0, // 设置y轴刻度的最小值
                // max:1800,  // 设置y轴刻度的最大值
                splitNumber: 9, // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: 'rgba(251, 251, 251, 1)'
                    }
                },
            },

            series: [
                {
                    name: "实际值",
                    data: [1032, 952, 391, 1434, 1220, 1330, 1320,
                        815, 1900, 701, 1900, 2200, 1700,
                        1200, 920, 1300, 1400, 2100, 1700, 930,
                        890, 1910, 301, 510],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '当前模型值',
                    data: [890, 932, 401, 1934, 1490, 1230, 1390,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 900, 1700, 1400, 1500, 800, 950,
                        810, 1400, 401, 500],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'yellow', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '所选模型值',
                    data: [290, 132, 421, 1434, 1410, 1130, 1890,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 1000, 1100, 1300, 1560, 800, 950,
                        810, 1600, 801, 900],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },

            ],

            color: ['#04dff9', 'rgb(40,140,255)', 'rgb(231,186,8)']
        };

        var option2 = {

            title: {
                // text: '小时能量预测',
                // subtext: "明日能量",
                subtextStyle: {
                    color: "rgba(251, 251, 251, 1)",
                    fontSize: 20
                },
                x: '80',
                padding: [0, 0, 0, 50],
                textStyle: {
                    color: "rgba(251, 251, 251, 1)",
                    fontSize: '16',
                    fontWeight: '500'
                },
            },
            animation: false,
            // animationDuration:15000,

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: ['当前模型值1', '实际值1', '所选模型值1'],
                textStyle: {
                    //标题颜色
                    color: "rgba(251, 251, 251, 1)"
                },
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '26%', // 等价于 y: '16%'
                left: '7%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: "rgba(251, 251, 251, 1)"
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 0, // 旋转角度
                    interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                show:true,
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                type: 'value',
                // min:0, // 设置y轴刻度的最小值
                // max:1800,  // 设置y轴刻度的最大值
                splitNumber: 9, // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: "rgba(251, 251, 251, 1)"
                    }
                },
            },

            series: [
                {
                    name: "实际值",
                    data: [1032, 952, 391, 1434, 1220, 1330, 1320,
                        815, 1900, 701, 1900, 2200, 1700,
                        1200, 920, 1300, 1400, 2100, 1700, 930,
                        890, 1910, 301, 510],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '当前模型值',
                    data: [890, 932, 401, 1934, 1490, 1230, 1390,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 900, 1700, 1400, 1500, 800, 950,
                        810, 1400, 401, 500],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'yellow', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '所选模型值',
                    data: [290, 132, 421, 1434, 1410, 1130, 1890,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 1000, 1100, 1300, 1560, 800, 950,
                        810, 1600, 801, 900],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },

            ],

            color: ['rgb(255,130,0)', 'rgb(40,140,255)', 'rgb(218,0,20)']
        };

        window.addEventListener("resize", function () {
            var eleChart = echarts.init(document.getElementById('energyGraph')); //电量图
            var hotChart = echarts.init(document.getElementById('powerGraph')); //能量图
            eleChart.resize();
            hotChart.resize();
        });
    </script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                options: {},
                energy: {
                    start_date: '',
                    end_date: '',
                    source_mode: '',
                    target_mode: '',
                    source_modes: [],
                    source_mode_name:'',
                    target_mode_name:'',
                    analyseValue:'',
                    analyseValue1:'',
                },
                power: {
                    start_date: '',
                    end_date: '',
                    source_mode: '',
                    target_mode: '',
                    source_modes: [],
                    source_mode_name:'',
                    target_mode_name:'',
                    analyseValue:'',
                    analyseValue1:'',
                },
                BASE_URL: ""
            },
            created:function() {
                // var eleData = {
                //     "deviceCode": "yc1008",
                //     "startTime": "2020-10-12",
                //     "endTime": "2020-10-17",
                //     "sourceModel": 44,
                //     "targetModel": 45
                // }
                // var enData = {
                //     "deviceCode": "yc1737",
                //     "startTime": "2020-10-12",
                //     "endTime": "2020-10-17",
                //     "sourceModel": 46,
                //     "targetModel": 47
                // }
                // drawEnChart(enData, 'energyGraph')
                // drawEleChart(eleData, 'powerGraph')
                this.getAllMode()
            },
            mounted:function () {
                parent.modifyTitle("能量电量模型对比");
            },
            methods: {
                energyGen: function () {
                     that.energy.source_mode_name = $("#energyGraphSource").val();
                     that.energy.target_mode_name = $("#energyGraphTarget").val();
                    var data = {
                        "deviceCode": "yc1008",
                        "startTime": this.energy.start_date,
                        "endTime": this.energy.end_date,
                        "sourceModel": this.energy.source_mode,
                        "targetModel": this.energy.target_mode,
                    }
                    if(!this.energy.source_mode){
                        layer.alert("源模型不能为空!", {
                            icon: 5,
                            title: "错误"
                        });
                        return;
                    }
                    if(!this.energy.target_mode){
                        layer.alert("目标模型不能为空!", {
                            icon: 5,
                            title: "错误"
                        });
                        return;
                    }
                    drawEnChart(data, 'energyGraph')
                },
                powerGen: function () {
                     that.power.source_mode_name = $("#eleGraphSource").val();
                     that.power.target_mode_name = $("#eleGraphTarget").val();
                    var data = {
                        "deviceCode": "yc1737",
                        "startTime": this.power.start_date,
                        "endTime": this.power.end_date,
                        "sourceModel": this.power.source_mode,
                        "targetModel": this.power.target_mode,
                    }
                    if(!this.power.source_mode){
                        layer.alert("源模型不能为空!", {
                            icon: 5,
                            title: "错误"
                        });
                        return;
                    }
                    if(!this.power.target_mode){
                        layer.alert("目标模型不能为空!", {
                            icon: 5,
                            title: "错误"
                        });
                        return;
                    }
                    drawEleChart(data, 'powerGraph')
                },
                getAllMode: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: that.BASE_URL + "/multipower/model/electric/getall",
                        dataType: "json",
                        data: {
                            "deviceCode": "yc1737",
                        },
                        async: true,
                        success: function (data) {
                            if (data.status == 200) {
                                var srcData = data.data;
                                for (var i = 0; i < srcData.length; i++) {
                                    if (srcData[i].used) {
                                        srcData[i].modelName = srcData[i].modelName+"(使用中)"
                                    }
                                }
                                that.power.source_modes = srcData;
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })

                    $.ajax({
                        type: "POST",
                        url: that.BASE_URL + "/multipower/model/energy/getall",
                        dataType: "json",
                        data: {
                            "deviceCode": "yc1008",
                        },
                        async: true,
                        success: function (data) {
                    
                            if (data.status == 200) {
                                var srcData1 = data.data;
                                for (var i = 0; i < srcData1.length; i++) {
                                    if (srcData1[i].used) {
                                        srcData1[i].modelName = srcData1[i].modelName+"(使用中)"
                                    }
                                }
                                that.energy.source_modes = srcData1;
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                login: function () {
                    that = this

                    //20210401
                    var url = "";
                    //get结果赋值给变量
                    // 获取配置文件url地址
                    $.ajax({
                        type: "GET",
                        url: "/multipower/url/get/name",
                        dataType: "json",
                        //注意要异步实现
                        async: false,
                        success: function (data) {
                            if (data.error == undefined) {
                                url = data.url
                            }
                        }
                    });

                    $.ajax({
                        type: "POST",
                        /* url: "http://139.210.5.22:10103/permissions/controlPermission", */
                        // 吉林内网使用
                        /* url: "http://192.168.10.11:8080/permissions/controlPermission", */
                        // url: BASE_URL + "/multipower/manager/checkManager",
                        //传递变量url
                        url: url,
                        dataType: "json",
                        data: {
                            "username": this.username,
                            "password": this.password
                        },
                        async: true,
                        success: function (data) {
                            // 如果权限校验通过：允许改变模式，并且保存模式
                            if (data.errorCode == null) {
                                layer.alert("权限验证通过!", {
                                    icon: 1,
                                    title: "提示"
                                });
                                that.changeModeData()

                                that.isShow = false;
                            } else {
                                // 如果权限校验失败：提示，不保存模式
                                layer.alert(data.errorCode.rtnString, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        }
                    })
                },
                reset: function () {
                    // 点击取消校验时，将选择的模式改回旧模式
                    this.selected = this.preselected

                    this.isShow = false
                },
                switchMode: function () {
                    if (this.selected != this.preselected) {
                        this.username = ''
                        this.password = ''
                        this.isShow = true
                    }
                },
                getModeData: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: BASE_URL + "/multipower/strategyJL/viewLastestMultiMode",
                        dataType: "json",
                        data: {
                            "graphId": that.graphId,
                            "remark": "1"
                        },
                        async: true,
                        success: function (data) {
                            console.log("success")
                            if (data.multimode == null) {
                                that.graphId = that.graphId
                                that.selected = '1001'
                                that.preselected = '1001'
                                that.current_mode = '1001'
                            } else {
                                that.graphId = data.multimode.graphId
                                that.selected = data.multimode.strategyType
                                that.preselected = data.multimode.strategyType
                                that.current_mode = data.multimode.strategyType
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                        }
                    })
                },
                changeModeData: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: BASE_URL + "/multipower/strategyJL/saveMultiMode",
                        dataType: "json",
                        data: {
                            "graphId": that.graphId,
                            "remark": "1",
                            "strategyType": that.selected
                        },
                        async: true, 
                        success: function (data) {
                            // 成功之后调用getModeData
                            that.getModeData()
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);
                        }
                    })
                },
                filterDate: function (start, end) {
                    if (start - end >= 0) {
                        this.$message({
                            type: 'error',
                            message: '结束日期应在开始日期之后!'
                        });
                        return false;
                    }
                    return true;
                }
            }
        });
    </script>

</body>

</html>